<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合组件</title>
    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
  // 虽然说函数式组件使用比较方便，但是这声明了很多全局变量，有可能不小心造成覆盖
  function Name (props) {
    return <h1>网站名称：{props.name}</h1>
  }

  function Url (props) {
    return <h1>网站地址：{props.url}</h1>
  }

  function Nickname (props) {
    return <h1>网站小名：{props.nickname}</h1>
  }

  // 对于超出一行的HTML代码，我们需要使用()去包裹【不然会有语法错误】
  function App () {
    return (
      <div>
        <Name name="程麒阁"/>
        <Url url="http://chengqige.com"/>
        <Nickname nickname="cqg"/>
      </div>
    )
  }

  ReactDOM.render(
    <App/>,
    document.getElementById('root')
  )
</script>
</body>
</html>
